{% extends "admin/base_site.html" %}
{% load static from staticfiles %}

{% block content %}

<link href="{% static 'pawnbroking/kendo/styles/kendo.common.min.css' %}" rel="stylesheet" />
<link href="{% static 'pawnbroking/kendo/styles/kendo.default.min.css' %}" rel="stylesheet" />
<link href="{% static 'pawnbroking/kendo/styles/kendo.dataviz.min.css' %}" rel="stylesheet" />
<link href="{% static 'pawnbroking/kendo/styles/kendo.dataviz.default.min.css' %}" rel="stylesheet" />

<script type="text/javascript" src="{% static 'pawnbroking/kendo/js/kendo.all.min.js' %}"></script>

<div id="stock-chart"></div>

<script>
function createChart() {
    $("#stock-chart").kendoStockChart({
        dataSource: {
            transport: {
                read: {
                    url: "../content/dataviz/js/boeing-stock.json",
                    dataType: "json"
                }
            }
        },
        title: {
            text: "Pledges"
        },
        dateField: "Date",
        panes: [{
            title: "Value"
        }, {
            name: "volumePane",
            title: "Volume",
            height: 150 // pixels
        }],
        categoryAxis: {
            pane: "volumePane"
        },
        valueAxes: [{
            // Default axis
            line: {
                visible: false
            }
        }, {
            name: "volumeAxis",
            pane: "volumePane",
            visible: false
        }],
        series: [{
            type: "candlestick",
            openField: "Open",
            highField: "High",
            lowField: "Low",
            closeField: "Close"

        }, {
            type: "column",
            field: "Volume",
            axis: "volumeAxis",
            tooltip: {
                format: "{0:C0}"
            }
        }],
        navigator: {
            series: {
                type: "area",
                field: "Close"
            },
            select: {
                from: "2009/02/05",
                to: "2011/10/07"
            }
        }
    });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>


Hello You Reached!!! hehehe
{% endblock %}
